<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-04 10:09:13
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-08-10 11:05:01
 * @FilePath: /things-admin/src/view/dataScreen/components/footer/footer_middle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <div class="header">
      <div class="title">按摩频次/累计时长</div>
      <img class="cope" src="../../images/997.png" alt="" @click.stop="cope" />
    </div>
    <div class="mian">
      <div class="mian_left">
        <div class="desc1">
          <div class="title">{{ count }}</div>
          <div class="desc">使用总次数/次</div>
        </div>
        <div class="desc2">
          <div class="title">{{ time }}</div>
          <div class="desc">使用总时长/h</div>
        </div>
      </div>
      <div id="echarts_nineteen"></div>
    </div>
    <!-- 放大弹窗 -->
    <div class="tanchuang" v-show="isMask">
      <div class="header">
        <div class="title">按摩频次/累计时长</div>
        <div class="el-icon-circle-close" @click.stop="cope"></div>
      </div>
      <div class="mian">
        <div class="mian_left">
          <div class="desc1">
            <div class="title">{{ count }}</div>
            <div class="desc">使用总次数/次</div>
          </div>
          <div class="desc2">
            <div class="title">{{ time }}</div>
            <div class="desc">使用总时长/h</div>
          </div>
        </div>
        <div id="echarts_nineteen_copy"></div>
      </div>
    </div>
    <div class="isMask" v-show="isMask"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  modelModeUsageStatistics,
  totalMassageStatistics
} from "@/base/api/DataScreen.ts";
export default {
  data() {
    return {
      time: 0, //累计时长
      count: 0, //累计次数
      data_one: [], //设备型号
      data_two: [], //时长
      data_three: [], //次数
      provinceId: this.provinceId || "",
      cityId: this.cityId || "",
      name: this.name || "",
      isMask: false,
      data_one_copy: [],
      data_two_copy: [],
      data_three_copy: []
    };
  },
  props: ["provinceId", "cityId", "name"],
  watch: {
    count(newval) {
      this.count = newval;
    },
    time(newval) {
      this.time = newval;
    },
    provinceId(newval) {
      this.provinceId = newval;
    },
    cityId(newval) {
      this.cityId = newval;
    },
    name(newval) {
      if (newval) {
        this.name = newval;
        this.modelModeUsageStatistics();
        this.totalMassageStatistics();
      }
    }
  },
  methods: {
    //复制信息
    cope() {
      this.isMask = !this.isMask;
    },
    echartsNineteen() {
      let myChartNineteen = echarts.init(
        document.getElementById("echarts_nineteen")
      );
      let option = {
        color: ["#60D4FF", "#2257CE"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          icon: "circle",
          itemWidth: 7,
          itemHeight: 7,
          itemGap: 3.5,
          top: 10,
          right: 45,
          textStyle: {
            color: "#FFF",
            fontSize: 10,
            fontWeight: "bold"
          }
          //   data: ["经典模式", "泰式拉筋", "脊柱牵引"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "\n型号",
            data: this.data_one,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0, // 强制显示所有标签
              textStyle: {
                color: "#FFFFFF", // 设置x轴标签字体颜色
                fontSize: 10
              }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 9, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "right",
              verticalAlign: "top"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            nameGap: 20,
            position: "right",
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0, // 强制显示所有标签
              textStyle: {
                color: "#FFFFFF", // 设置x轴标签字体颜色
                fontSize: 10
              }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 10, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "left",
              verticalAlign: "top"
            }
          }
        ],
        series: [
          {
            name: "按摩频次/次",
            type: "bar",
            symbol: "circle",
            data: this.data_three,
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            }
          },
          {
            name: "累计时长/小时",
            type: "bar",
            symbol: "circle",
            stack: "Ad",
            data: this.data_two,
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#0061F8" },
                      { offset: 1, color: "rgba(0,97,248,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            }
          }
        ]
      };
      myChartNineteen.setOption(option);
    },
    echartsNineteenCopy() {
      let myChartNineteen = echarts.init(
        document.getElementById("echarts_nineteen_copy")
      );
      let option = {
        color: ["#60D4FF", "#2257CE"],
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        legend: {
          icon: "circle",
          itemWidth: 7,
          itemHeight: 7,
          itemGap: 3.5,
          top: 10,
          right: 45,
          textStyle: {
            color: "#FFF",
            fontSize: 20,
            fontWeight: "bold"
          }
          //   data: ["经典模式", "泰式拉筋", "脊柱牵引"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "\n型号",
            data: this.data_one_copy,
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0, // 强制显示所有标签
              textStyle: {
                color: "#FFFFFF", // 设置x轴标签字体颜色
                fontSize: 20
              }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "right",
              verticalAlign: "top"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            nameGap: 20,
            position: "right",
            splitLine: {
              show: false // 隐藏y轴分隔线
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0, // 强制显示所有标签
              textStyle: {
                color: "#FFFFFF", // 设置x轴标签字体颜色
                fontSize: 20
              }
            },
            nameTextStyle: {
              color: "#60D4FF", // 设置x轴名称的颜色为#333
              fontSize: 16, // 设置x轴名称的字体大小为16
              fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
              align: "left",
              verticalAlign: "top"
            }
          }
        ],
        series: [
          {
            name: "按摩频次/次",
            type: "bar",
            symbol: "circle",
            data: this.data_three_copy,
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            }
          },
          {
            name: "累计时长/小时",
            type: "bar",
            symbol: "circle",
            stack: "Ad",
            data: this.data_two_copy,
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#0061F8" },
                      { offset: 1, color: "rgba(0,97,248,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            }
          }
        ]
      };
      myChartNineteen.setOption(option);
    },
    //按摩频次 累计时长
    modelModeUsageStatistics() {
      modelModeUsageStatistics(this.provinceId, this.cityId).then(res => {
        // console.log(res,'------------------按摩频次');
        this.data_one = [];
        this.data_two = [];
        this.data_three = [];
        res.data.forEach((item, index) => {
          //统计按摩频次 累计时长总和
          if (
            this.data_one.length <= 6 &&
            !this.data_one.includes(item.modelName)
          ) {
            this.data_one.push(item.modelName);
            this.data_two.push(Math.floor(item.lifetime / 3600) + 1);
            this.data_three.push(Number(item.count));
          }

          if (!this.data_one_copy.includes(item.modelName)) {
            this.data_one_copy.push(item.modelName);
            this.data_two_copy.push(Math.floor(item.lifetime / 3600) + 1);
            this.data_three_copy.push(Number(item.count));
          }
        });
        //整数每三位加个逗号
        this.echartsNineteen();
        this.echartsNineteenCopy();
      });
    },
    // 按摩时长和次数总和
    totalMassageStatistics() {
      totalMassageStatistics(this.provinceId || "", this.cityId).then(res => {
        // 每三位加一个逗号 正则
        this.count = res.data.count
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        this.time = Math.floor(res.data.sum / 3600)
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      });
    }
  },
  mounted() {
    this.modelModeUsageStatistics();
    this.totalMassageStatistics();
  }
};
</script>

<style lang="less" scoped>
.content {
  width: 496.5px;
  height: 256px;
  margin-left: 10px;
  transition: all 1s;
  // background-color: #fff;
  background: url(../../images/3466.png) no-repeat;
  background-size: cover;
  .header {
    width: 496.5px;
    height: 46px;
    display: flex;
    align-items: center;
    .title {
      width: 168px;
      height: 29px;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      line-height: 29px;
      margin: 0 273.5px 0 21px;
    }
    .cope {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .mian {
    display: flex;
    .mian_left {
      margin: 7px 6px;
      .desc1 {
        width: 124px;
        height: 92px;
        .title {
          width: 91px;
          height: 45px;
          font-size: 37px;
          font-weight: bold;
          color: #37e8fb;
          line-height: 43px;
          margin: 8px 10px;
        }
        .desc {
          width: 103px;
          height: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          margin: 0 12px;
        }
      }
      .desc2 {
        width: 124px;
        height: 92px;
        .title {
          width: 91px;
          height: 45px;
          font-size: 37px;
          font-weight: bold;
          color: #0747ff;
          line-height: 43px;
          margin: 0 6px;
        }
        .desc {
          width: 103px;
          height: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          margin: 0 16px;
        }
      }
    }
    #echarts_nineteen {
      width: 360.5px;
      height: 210px;
      // background-color: #fff;
    }
  }
  .isMask {
    position: fixed;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .tanchuang {
    position: fixed;
    z-index: 99999999;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background-color: #0a1632;
    .header {
      width: 100%;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: url(../../images/3473.png) no-repeat;
      background-size: cover;
      .title {
        width: 208px;
        height: 29px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 29px;
        margin: 0 21px;
      }
      div {
        width: 20px;
        font-size: 24px;
        height: 20px;
        margin-right: 20px;
        color: #fff;
        cursor: pointer;
      }
    }
    .mian {
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      display: flex;
      margin-top: 8%;
      margin-left: 20px;
      padding-bottom: 10%;
      .mian_left {
        transform-origin: left top;
        transform: scale(2);
        margin: 7px 6px;
        .desc1 {
          width: 124px;
          height: 92px;
          .title {
            width: 91px;
            height: 45px;
            font-size: 37px;
            font-weight: bold;
            color: #37e8fb;
            line-height: 43px;
            margin: 8px 10px;
          }
          .desc {
            width: 123px;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            margin: 0 12px;
          }
        }
        .desc2 {
          margin-top: 30px;
          width: 124px;
          height: 92px;
          .title {
            width: 91px;
            height: 45px;
            font-size: 37px;
            font-weight: bold;
            color: #0747ff;
            line-height: 43px;
            margin: 0 6px;
          }
          .desc {
            width: 103px;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            margin: 0 16px;
          }
        }
      }
      #echarts_nineteen_copy {
        width: 3000.5px;
        height: 450px;
        margin-left: 180px;
      }
    }
  }
}
</style>
